<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>


</head>
<body>
<div id="app">
    <h1>请求获得对象</h1>
    <p>{{info.name}}</p>
    <p>{{info.age}}</p>
    <p>{{info.city}}</p>
    <p>{{info.country}}</p>
    <a v-bind:href="info.url">点击我</a>

</div>

<script>

    var vm  = new Vue({
        el:"#app",
        data () {
            return {
                info:  null
            }
        },
        mounted () {
            axios.get("./data.json")
                .then(response => {
                console.log(response.data);
                this.info = response.data;
                console.log(this.info);
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    });
</script>
</body>
</html>